<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <aaa></aaa>
    </div>

    
    <template id="aaa">
        <div>
            <p>{{a}}</p>
            <hr>
            <bbb :a="a"></bbb>   
        </div>
    </template>

    <template id="bbb">
        <div>
            {{b}}
            <input type="text" v-model="ownMessage">
        </div>
    </template>
</body>
<script src="./base/vue.js"></script>

<script>
    // 组件、实例对象上有这样的属性：$parent,$children,$root,
    //这样的话，就形成了viewmodel链(关系链)，理论上来说，
    //任何两个组件之间的数据都可以互相调用，获取
    //缺点：太乱了 this.$root.$children[3].$children[4]....
  
    Vue.component("aaa",{
        template:"#aaa",
        data(){
            return {
                a:"我是aaa!"
            }
        }
    })

    Vue.component("bbb",{
        template:"#bbb",
        props:["a"],
        data(){
            return {
                b:"我是bbb!"
            }
        },
        computed:{
            ownMessage:{
                get(){
                    return this.a;
                },
                set(val){
                    //只能aaa组件更改自身数据！数据只能由自己去更改！
                    this.$parent.a = val;  
                }
            }
        }
    })



    var vm = new Vue({
        el:"#app"
    })
    
    


</script>
</html>